<template>
  <div class="top">
    <van-nav-bar
      right-text="客服"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="zhuce">
       <p>注册</p>
    </div>
   
    <div class="box">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          placeholder="请输入账号"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          placeholder="请输入密码"
        />
        <div class="tip" style="margin: 15px">
          <van-checkbox v-model="checked" icon-size="16px" 
            >我已阅读并同意</van-checkbox
          >
        </div>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >注册</van-button
          >
        </div>
      </van-form>

      <div class="footer" style="margin: 16px">
       <span>手机号登录</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "register",
  data() {
    return {
      username: "",
      password: "",
      checked :""
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      const data=values
      const user_name=values.用户名
      const user_pwd=values.密码
      this.axios({
        method:"post",
        url:"http://localhost:3000/add_user",
        data:data,
        processData: false,
        contentType: false,
      }).then((res)=>{
        console.log(res)
        // console.log(this)
        if(res.data==="账号注册成功"){
          Toast(res.data)
          console.log(res)
          this.$router.push({
            path:'/',
            query:{
              data:{
                user_name:user_name,
                user_pwd:user_pwd
              }
            }
          })
        }else{
          Toast(res.data)
        }
        
      })
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("客服");
    },
  },
};
</script>
<style scoped>
/* .top {
  margin-top: -60px;
} */
.zhuce p {
  font-size: 24px;
  margin-left: 9%;
}
.box {
  padding: 0 5%;
}
.tip {
  /* position: absolute;
  bottom: 0; */
  font-size: 12px;
  color: rgb(235, 239, 243);
}
.footer {
  font-size: 12px;
  color: #1989fa;
}
a {
  list-style: none;
  float: left;
  color: #1989fa;
}
span {
  float: right;
}
</style>